<script lang="ts" setup>
import { Right } from "@nutui/icons-vue";
import "@nutui/icons-vue/dist/style_iconfont.css";
import { useRouter } from "vue-router";
import { useNewsStore } from "../../store/modules/news";

// 引入路由
const router = useRouter();
const store = useNewsStore();

const newsList = ref([]);
newsList.value = store.getNewsList();

const menuVisible = ref(false);

//跳转详情页
const gotoDetails = (id) => {
  router.push(`/news/${id}`);
};
</script>

<template>
  <div class="h-full flex flex-col bg-gray-1 duration-300" :class="{ 'translate-x-4/5': menuVisible }">
    <!-- 文章列表 -->
    <div class="grow of-auto">
      <div class="m-3 bg-white rd-3">
        <div class="p-3 flex items-center justify-between border-inherit border-b-1">
          <div class="pl-2 b-l-3 b-l-solid b-l-blue">新闻中心</div>
          <Right />
        </div>
        <ul>
          <li v-for="(item, index) in newsList" class="flex gap-3 p-3" @click="gotoDetails(item.id)">
            <img class="shrink-0 block w-30 h-20 rd-3 of-hidden" :src="item.imgsrc" alt="" />
            <h3 class="grow">{{ item.title }}</h3>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
